<!DOCTYPE HTML>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title>拼团详情</title>
    <link rel="stylesheet" type="text/css" href="../css/api.css" />
    <link rel="stylesheet" type="text/css" href="../css/style.css" />
    <link rel="stylesheet" type="text/css" href="../css/swiper.min.css" />
    <link rel="stylesheet" type="text/css" href="../css/layer.css" />
    <link rel="stylesheet" type="text/css" href="../css/mdw.css" />
    <script type="text/javascript" src="../script/api.js"></script>
    <script type="text/javascript" src="../script/jquery-1.9.1.min.js"></script>
    <script type="text/javascript" src="../script/swiper.min.js"></script>
    <script src="https://cdn.bootcss.com/jquery.qrcode/1.0/jquery.qrcode.min.js"></script>
    <script type="text/javascript" src="../script/clipboard.min.js"></script>
    <script type="text/javascript" src="../script/mobile.js"></script>
    <script type="text/javascript" src="../script/layer.js"></script>
    <script type="text/javascript" src="../script/mdw.js"></script>
    <script type="text/javascript" src="../script/jumpPage.js"></script>

</head>
<body>
    <header class="header">
        <div class="backPrevPage" onclick="historyBack()"></div>
        <div class="pageTitle">拼团详情</div>
    </header>
    <section class="HTML_BOX">
        <div class="bg-eee" style="border-bottom:.2rem solid #EEE ; "></div>
        <div class="gb_detailsTitle gb_1 f_c dn"><span class="count"></span>人团 拼团中</div>
        <div class="gb_Details gb_2 f_c dn gb_detailsTitle"><span class="count"></span>人团 拼团成功</div>
        <div class="gb_Details gb_3 f_c dn gb_detailsTitle">拼团失败，款项将原路退换</div>
        <div class="gb_detailsBox1 gb_1 f_c dn">再邀请<span class="sxCount">2</span>人即可拼团成功</div>
        <div class="gb_detailsBox1 gb_2 f_c dn">拼团人数已凑足<span class="count">2</span>人，拼团成功</div>
        <div class="gb_detailsBox1 gb_3 f_c dn">再邀请<span class="sxCount">2</span>人才可成团</div>
        <div class=" gb_detailsBox2 f_c">
            <div class="msdjs">距结束
                <span class="djstime hh">01</span>：
                <span class="djstime mm">06</span>：
                <span class="djstime ss">02</span>
            </div>
        </div>
        <ul class="groupUsetList">
            <!-- <li>
                <div class="pinzhu">拼主</div>
                <img src="../image/tx.png"/>
            </li>
            <li>
                <img src="../image/tx.png"/>
            </li>
            <li>
                <img src="../image/user_no.png"/>
            </li>
            <li>
                <img src="../image/user_no.png"/>
            </li> -->
            
        </ul>
        <div class="pageBtn fenxiang f_c">邀请好友拼团</div>
        <div style="margin-top: 0.1rem" class="pageBtn gologin f_c">前往首页逛一逛</div>
    </section>
    <!-- 弹窗 -->
    <div class="mask_pop">
        <div class="mask" ></div>
        <div class="fenxiang_pop">
            <div class="f_c fenxiang_pop_title">分享给</div>
            <ul class="fenxiangList plr">
                <li class="pyq"><i></i><span>朋友圈</span></li>
                <li class="weibo"><i></i><span>微博</span></li>
                <li class="qq"><i></i><span>QQ</span></li>
                <li class="facebook"><i></i><span>Facebook</span></li>
            </ul>
            <ul class="fenxiangList plr">
                <li class="wx bn"><i></i><span>微信</span></li>
                <!-- <li class="youxiang bn"><i></i><span>邮箱</span></li> -->
                <li class="clear bn"><i></i><span>生成分享图</span></li>
                <li class="copy bn"><i></i><span>复制链接</span></li>
            </ul>
            <div id="qrcode"></div>
            <a class="downcode dn" download="分享二维码">点击保存二维码</a>
            <div class="pop_close2 f_c">取消</div>
        </div>
  </div>
</body>
<script type="text/javascript" src="../script/api.js"></script>
<script type="text/javascript">
    var param;
    var state = 1;
    var product_id = 0;
    $(".orderClass li").click(function(){
        $(".orderClass li").removeClass("on");
        $(this).addClass("on");
    })
    $(".fenxiang").click(function(){
         if(state==1){
            maskOpen();
        }else{
            goWare(product_id);
        }
    });
    $(".gologin").click(function(){
       openWin('index','index.html');
    });
    $(".pop_close2").click(function(){
        maskClose();
    });
    apiready = function(){
        $api.fixStatusBar($api.dom('header'));
        api.setStatusBarStyle({
            color: '#fff',//设置APP状态栏背景色
            style: 'dark'
        });
        ifCnAndEn();
        param = api.pageParam;
        ready();
    };
    function ready(){
        getAjax(Interface.group_user,{id:param.id},function(res){
            console.log(JSON.stringify(res));
            var com_num = res.data.total_num;
            var user = res.data.user;
            $(".count").html(com_num);
            $(".sxCount").html(com_num-user.length);
            state = res.data.state;
            product_id = res.data.product_id
            if(state==1){
                $(".gb_1").removeClass("dn");
            }else if(state==2){
                $(".gb_2").removeClass("dn");
                $(".fenxiang").html('再次发起拼团');
                if(cnen==2){
                    $(".fenxiang").html('once more start Group');
                }

            }else{
                $(".gb_3").removeClass("dn");
                $(".fenxiang").html('再次发起拼团');
                if(cnen==2){
                    $(".fenxiang").html('once more start Group');
                }
            }
            var html='';
            for(var i = 0;i<com_num;i++){
                if(i<user.length){
                    pinzhu = '拼主';
                    if(cnen==2)pinzhu='Main';
                    if(i==0){
                        html+='<li>';
                            html+='<div class="pinzhu">'+pinzhu+'</div>';
                            html+='<img src="'+getImg(user[i].icon)+'"/>';
                        html+='</li>';
                    }else{
                        html+='<li>';
                            html+='<img src="'+getImg(user[i].icon)+'"/>';
                        html+='</li>';
                    }
                }else{
                    html+='<li>';
                        html+='<img src="../image/user_no.png"/>';
                    html+='</li>';
                }
            }
            pop_timeDown(res.data.end_time);
            $(".groupUsetList").html(html);
        },function(res,err){})
    }
    //倒计时
    var timer;
    function pop_timeDown(timestamp){
        timer = setInterval(function(){
            //var nowTime = Date.parse( new Date() ).toString();
            var endTime = timestamp+"000";
            var nowTime = new Date();
 
            var t = endTime - nowTime.getTime()
            //var t = endTime - nowTime.substr(0,10);
            if(t <= 0){
                clearInterval(timer);
                $(".djstime.hh").html("00");
                $(".djstime.mm").html("00");
                $(".djstime.ss").html("00");
                return false;
            }
            // var d=Math.floor(t/1000/60/60/24);
            var hour=Math.floor(t/1000/60/60%24);
            var min=Math.floor(t/1000/60%60);
            var sec=Math.floor(t/1000%60);
            if (hour < 10) {
                 hour = "0" + hour;
            }
            if (min < 10) {
                 min = "0" + min;
            }
            if (sec < 10) {
                 sec = "0" + sec;
            }
            $(".djstime.hh").html(hour);
            $(".djstime.mm").html(min);
            $(".djstime.ss").html(sec);
        },1000);
}
    $(".pyq").click(function(){
        var p = {
            apiKey: '',
            scene: 'timeline',
            title:$("#wareTitle").text(),
            thumb:ajaxUrl.url + '/Public/Home/images/logo_ios.png',
            contentUrl:ajaxUrl.url +'/mobile/html/ware.html?id='+product_id,
        };
        wxpyqFX(p);
    })
    $(".wx").click(function(){
        var p = {
            apiKey: '',
            scene: 'session',
            title:$("#wareTitle").text(),
            thumb:ajaxUrl.url + '/Public/Home/images/logo_ios.png',
            contentUrl:ajaxUrl.url +'/mobile/html/ware.html?id='+product_id,
        };

        wxpyqFX(p);
    })
    $(".weibo").click(function(){
        var p = {
            title:$("#wareTitle").text(),
            text:$("#wareTitle").text(),
            thumb:ajaxUrl.url + '/Public/Home/images/logo_ios.png',
            contentUrl:ajaxUrl.url +'/mobile/html/ware.html?id='+product_id,
        }
        weibo_authorize(p);
    })
    $(".qq").click(function(){
        var p = {
            url: ajaxUrl.url +'/mobile/html/ware.html?id='+product_id,
            title: $("#wareTitle").text(),
            description: $("#wareTitle").text(),
            imgUrl: ajaxUrl.url + '/Public/Home/images/logo_ios.png',
        }
        qqfx(p);
    })
    
    $(".facebook").click(function(){
       var p =  {
            url: ajaxUrl.url +'/mobile/html/ware.html?id='+product_id,
            imgUrl: ajaxUrl.url + '/Public/Home/images/logo_ios.png',
            description: '',
            title: $("#wareTitle").text(),
        };
        fackBookFX(p);
    })
    var clipboard = new Clipboard('.copy', {
        text: function() {
            return ajaxUrl.cnurl +"/mobile/html/ware.html?id="+product_id;
        }
    });
    clipboard.on('success', function(e) {
        pop.notice("链接复制成功");
    });
 
    clipboard.on('error', function(e) {
        console.log(e);
    });
    $(".clear").click(function(){
        console.log($('#qrcode').find('canvas').length)
        if($('#qrcode').find('canvas').length <1){
            var qrcode= $('#qrcode').qrcode(ajaxUrl.cnurl +"/mobile/html/ware.html?id="+product_id);   
            var canvas=qrcode.find('canvas').get(0);  
            $('.downcode').attr('href',canvas.toDataURL('image/jpg'));
            // $('.downcode').removeClass('dn');
        }
    })
</script>
<script type="text/javascript">
    function ifCnAndEn(){
        if(cnen==2){
           $(".pageTitle").html("Group details");
           $(".loginBtn").html('Determine');
           $(".gb_detailsTitle.gb_1").html('<span class="count"></span> People Group Deal');
           $(".gb_Details.gb_2").html('Successful <span class="count"></span>-man group');
           $(".gb_Details.gb_3").html('If the group fails, the money will be returned');
           $(".gb_detailsBox1.gb_1").html('<span class="sxCount"></span>&nbsp;more people to make the deal');
           $(".gb_detailsBox1.gb_2").html('<span class="count"></span>&nbsp;People are enough. Success');
           $(".gb_detailsBox1.gb_3").html('Invite <span class="sxCount"></span> more talents to form a group');
           $(".msdjs").html('End<span class="djstime hh">00</span>：<span class="djstime mm">00</span>：<span class="djstime ss">00</span>');
           $(".fenxiang").html('Invite Friends');
           $(".gologin").html('Go Back to Home');
           $(".pyq span").html("Moment");
            $(".weibo span").html("Weibo");
            $(".wx span").html("WeChat");
            $(".clear span").html("QR Code");
            $(".copy span").html("Link");
            $(".fenxiang_pop_title").html('Share to');
            $(".pop_close2").eq(4).html('Cancel');
        }
    }
</script>
</html>